<script setup>
// 秒变手淘
import { isLogin } from '~/logic'

const props = defineProps([
  'link', 'title',
])
const emit = defineEmits(['login'])
const instance = getCurrentInstance()
const titleName = ref('秒变手淘')
const href = ref('')
if (props.link)
  href.value = props.link

if (props.title) {
  titleName.value = props.title
}
else {
  const url = location.href
  if (url.includes('https://detail.tmall.com/'))
    href.value = url.replace('https://detail.tmall.com/', 'https://detail.m.tmall.com/')
  else if (url.includes('https://item.taobao.com/'))
    href.value = url.replace('https://item.taobao.com/item.htm', 'https://h5.m.taobao.com/awp/core/detail.htm')
}

const showMobileModal = ref(false)
const handle = () => {
  if (isLogin(instance.proxy))
    showMobileModal.value = true
}
</script>

<template>
  <div style="display: inline-block" @click="handle">
    <slot>
      <div class="inner-box btn bold">
        <!--    <MobileOutlined /> -->
        秒变手淘
      </div>
    </slot>
  </div>
  <a-modal v-model:visible="showMobileModal" style="top: 20px" class="mobile-modal" :title="titleName" :width="480" :footer="false">
    <iframe :src="href" style="width: 100%;height: 80vh;border: 0" />
  </a-modal>
</template>

<style scoped>

</style>

<style lang="less">
.mobile-modal{
  .ant-modal-body{
    padding: 0 !important;
  }
}
</style>
